<template>
	<a-tree-select 
		v-model:value 				= 'value' 
		@change 					= 'onChange'
		:placeholder 				= 'p' 
		:allowClear 				= 'allowClear'
		:tree-checkable 			= 'multiple'
		:maxTagCount 				= 'count'
		:showSearch 				= 'true'
		:treeDefaultExpandAll 		= 'expand'
		:treeDefaultExpandedKeys 	= '[0]'
		:tree-data 					= 'ajax.data'
		treeNodeFilterProp 			= 'title'
		:treeNodeLabelProp 			= 'nameStr'
		:replaceFields 				= '{ value: idStr, title:nameStr }'
		:style 						= '{minWidth:vn.setPx(width)}'
	>
	</a-tree-select>
</template>

<script>
	import { ref } from 'vue'
	import { TreeSelect } from 'ant-design-vue'
	app.use(TreeSelect)
	/* --------------------------- Page --------------------------- */
	export default{
		props:{
			p			: { type:String },
			name 		: String,
			label 		: String,
			form 		: Object,
			param 		: Object,
			value 		: [Number, String, Array],
			allowClear 	: { type:Boolean, default:true },
			multiple	: { type:Boolean, default:false },
			count		: { type:Number, default: 3 },
			data		: { type:Array, default: [] },
			api 		: String,
			idStr 		: { type: String, default: 'id' },
			nameStr 	: { type: String, default: 'label' },
			cache 		: Boolean,
			back 		: Boolean,
			expand 		: { type:Boolean, default:false },
			width 		: [String, Number ],
		},
		emits:{
			change:null,
			'update:value':null,
			init: null
		},
		setup(props, ctx){
			const { data } = props
			const ajax = ref({ data })
			
			$fn.ajax({ ajax, ctx, ...props })
		
			return {
				vn: $,
				onChange: (value, label, extra) => {
					ctx.emit('update:value', value)
					ctx.emit('change', $fn.getFormFormat({...props, formType:'tree-select', data:ajax.value.data }) )
				},
				ajax
			}
		}
	}
</script>